<template>
  <div
    class="h-[calc(100%-0.5px)] flex flex-col min-w-[320px] overflow-auto"
    id="nuxtBoxTag"
  >
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
  <XMAd
    :gamDefineSlot="gamConfig?.anchor?.slot"
    :gamType="GamTypeEnum.自动锚定广告"
    :position="gamConfig?.anchor?.position"
  />
  <XMAd
    :gamDefineSlot="gamConfig?.interstitial"
    :gamType="GamTypeEnum.自动插屏广告"
  />
</template>

<script setup lang="ts">
import { useConfigStore } from "./composables/useConfigStore";
import { useGA } from "./composables/useGA";

const { config, initConfig } = useConfigStore();
await initConfig();
const { logoMeta, siteName, GAConfig, gamConfig, themeJson } = config.value;
const { windowBlur, windowVisible, windowBeforeUnload, windowMessage } = useGA();
const { pid = "" } = useRoute().query;

useHead({
  title: siteName,
  meta: [
    { name: "viewport", content: "width=device-width, initial-scale=1" },
    { name: "description", content: siteName },
  ],
  link: [
    {
      rel: "icon",
      type: "image/png",
      href: getSrc({ isAutoImg: true, src: logoMeta }),
    },
  ],
  script: [
    {
      src: `https://www.googletagmanager.com/gtag/js?id=${GAConfig?.GAId}`,
      crossorigin: "anonymous",
      defer: true,
    },
    {
      innerHTML: `
          window.dataLayer = window.dataLayer || [];
          window.gtag = function gtag () {
            window.dataLayer.push(arguments);
          }
          window.gtag('js', new Date());
          window.gtag('config', '${GAConfig?.GAId}');`,
      type: "text/javascript",
      defer: true,
    },
    {
      innerHTML: `
          !function (w, d, t) {
            w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=i+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};
            ttq.load("${pid}");
            ttq.page();
          }(window, document, 'ttq')`,
      type: "text/javascript",
      defer: true,
    },
  ],
  bodyAttrs: {
    style: {
      background: themeJson?.background,
    },
  },
  htmlAttrs: {
    style: {
      background: themeJson?.background,
      "--xm-color": themeJson?.element,
      "--xm-background": themeJson?.background,
    },
  },
});

onMounted(async () => {
  await initCpu();
});

if (import.meta.client) {
  windowBlur();
  windowVisible();
  windowBeforeUnload();
  windowMessage();
}
</script>

<style></style>

